<template>
	<view class="order">
		
		
		<view   v-for="(item,index) in addressList" :key="index" class="list" @click="select(item) " v-if="index==0 && addressList.length">
				<view >
					<view style="margin-bottom: 10rpx;">
						<text style="font-size: 32rx;font-weight: bold;">{{item.realname}}</text>
						<text
							style="color:#999999;margin-left: 20rpx;margin-right: 20rpx;">{{item.phone}}</text>
					</view>
					<view class="" >
						{{item.province}}{{item.city}}{{item.county}}{{item.address}}
					</view>
				</view>
					
				
				<view class="icon">
					<image src="../../static/image/edit.png" mode="widthFix"></image>
				</view>
		</view>
	
		
		<view class="dianpu_list" @click="goAddress" v-if="!addressList.length" >
			<view class="right_box" style="float: left;">
				<p class="p3">
					<image src="/static/img/home/morenweizhi.png" mode=""></image>
					<text class="text1">请选择收货地址</text>
				</p>
			</view>
		</view>
		
		<view class="dianpu_list" v-if="location.address" @tap="jumpLocation">
			<!-- <image :src="location.head_img" mode=""></image> -->
			<!-- <view class="right_box">
				<p class="p1"><text class="text0">{{location.shop_name}}</text></p>
				<p class="p3">
					<image src="/static/img/home/morenweizhi.png" mode=""></image>
					<text class="text1">{{location.address}}</text>
				</p>
			</view> -->
			<p class="p4" v-if="master.user_name">
				<!-- <text class="text1">服务点</text> -->
				<image :src="master.head_img" mode=""></image>
				<text class="text2">{{master.user_name}}</text>
			</p>
			<p class="moren" :style="{background: newColor.color}">服务点</p>
		</view>
		<!-- <view class="dianpu_list" v-else @tap="jumpLocation">
			<view class="right_box" style="float: left;">
				<p class="p3">
					<image src="/static/img/home/morenweizhi.png" mode=""></image>
					<text class="text1">请选择服务点</text>
				</p>
			</view>
		</view> -->
		
	
		
		<view class="list_s" v-for="(item,index) in goodList" :key="index">
			<image v-if="item.img[0] !== ''" :src="item.img[0]" mode=""></image>
			<image v-else :src="item.img" mode=""></image>
			<view class="goods_right">
				<p class="p1">{{item.title}}</p>
				<p class="p2" v-if="item.is_activity == 1"><text class="text1">{{item.option_title || ''}} ¥{{item.activity_price}} x {{item.num|| 1}}</text></p>
				<p class="p2" v-else><text class="text1">{{item.option_title || ''}} ¥{{item.price}} x {{item.num|| 1}}</text></p>
				<p class="p3">
					<text class="text2">小计：</text>
					<text class="text1" v-if="item.is_activity == 1">¥{{Number(item.activity_price)*item.num || Number(item.activity_price) | setPrice}}</text>
					<text class="text1" v-else>¥{{Number(item.price)*item.num || Number(item.price) | setPrice}}</text>
				</p>
			</view>
		</view>
		<p class="youhui">
			<text class="text1">优惠券</text>
			<image src="../../static/image/right.png" mode=""></image>
			<text class="text2" @tap="openpop">{{ title || '请选择优惠券' }}</text>
		</p>
		<view class="tips" v-if="shows == true">
			<text>备注</text>
			<textarea placeholder-style="color:#999999;font-size:24upx;" placeholder="选填" auto-height @blur="getTips" />
		</view>
		<view class="bottom_price">
			<text class="allprice">
				合计:
				<text v-if="prices == ''">¥{{ sumPrice }}</text>
				<text v-else>¥{{ prices }}</text>
			</text>
			<text class="submit" @tap="jumpSuccess" :style="{background: newColor.color}">立即支付</text>
		</view>
		<ourLoading isFullScreen :active="active" text="loading..." />
		<!-- 规格-模态层弹窗 -->
		<uni-popup ref="popup" type="bottom" @change="onchange">
			<scroll-view class="rules" scroll-y @scrolltolower="onbottom">
				<radio-group @change="radioChange" style="width: 90vw;">
					<label v-for="(item,index) in couponData" :key="index" v-if="Math.abs(item.cill)<=sumPrice">
						<view class="youhui_list">
							<p class="p1">满{{Math.abs(item.cill)}}减{{Math.abs(item.money)}}元</p>
							<p class="p2">有效期至：{{item.invalid_time}}</p>
						</view>
						<view class="radio"><radio style="transform:scale(0.7)" :color="newColor.color" :value="item.id"/></view>
					</label>
					<label>
						<view class="youhui_list">
							<p class="p1" style="margin-top: 20upx;padding-bottom: 20upx;">不使用优惠券</p>
							<p class="p2"></p>
						</view>
						<view class="radio"><radio style="transform:scale(0.7)" :color="newColor.color"/></view>
					</label>
				</radio-group>
			</scroll-view>
			<p :style="{background:'#ffffff',overflow: 'hidden',width: 100+'vw'}">
				<text class="enter" :style="{background:newColor.color}" @tap="close">完成</text>
			</p>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import {getGoodData} from '../../../static/utils/ahth.js'
import {wxpay} from '../../../static/utils/pay.js'
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			active: true,
			youhui: '',
			location:{},
			master:{},
			goodList:[],
			couponData:[],
			sumPrice: 0,
			title:'',
			couponId:'',
			group:0,
			iscart: 1,
			teamid:'',
			optionId:'',
			num:'',
			remark:'',
			shows: true,
			prices:'',
			userinfo:{},
			addressList:[],
			address_id:''
		};
	},
	onShow() {
		this.getUserInfo()
		this.getList()
	},
	onLoad() {
		this.optionId = this.$Route.query.optionId || ''
		this.optionName = this.$Route.query.optionName
		this.num = this.$Route.query.num
		console.log('optionId', this.optionId)
		if(this.$Route.query.group){
			this.group = this.$Route.query.group
			this.iscart = this.$Route.query.iscart
			this.teamid = this.$Route.query.teamid || ''
		}
		this.goodList = getGoodData()
		this.goodList.forEach(e=>{
			if(e.num){
				if(e.is_activity == 1){
					this.sumPrice = Math.abs(e.activity_price*e.num) + this.sumPrice
				}else{
					this.sumPrice = Math.abs(e.price*e.num) + this.sumPrice
				}
			}else{
				if(e.is_activity == 1){
					this.sumPrice = Math.abs(e.activity_price) + this.sumPrice
				}else{
					this.sumPrice = Math.abs(e.price) + this.sumPrice
				}
			}
		})
		let price = this.sumPrice
		this.sumPrice = price.toFixed(2)
		this.getMycoupon()
		console.log(this.goodList)
		setTimeout(() => {
			this.active = false;
		}, 600);
	},
	filters:{
		setPrice(value){
			return value.toFixed(2)
		}
	},
	methods: {
		select(item){
			uni.navigateTo({
				url:'../address/addressList'
			})
		},
		getList(){
			this.request(
				'user/address',
				{
					address_id:this.address_id
				},
				'post'
			).then(res => {
				if(res.code==200){
					if (! Array.isArray(res.data) ) {
						this.addressList=[res.data];
					}else{
						this.addressList=res.data;
					}
				}
				
			
				
			});
		},
		goAddress(){
           uni.navigateTo({
           	   url:'../address/addressList'
           })
		},
		requestMsg() { //订阅通知
		    return new Promise((resolve, reject) => {
		      wx.requestSubscribeMessage({
		        tmplIds: ["NMywdW7B128wzv3SrNu4n2btnFiBuXzSveTs-CY9aw4"],
		        success: (res) => {
					console.log(res)
		          if (res['NMywdW7B128wzv3SrNu4n2btnFiBuXzSveTs-CY9aw4'] === 'accept') {
					 this.jumpSuccess()
		          }
		        },
		        fail(err) {
		          //失败
		          console.error(err);
		          reject()
		        }
		      })
		    })
		  },
		jumpSuccess() {
			if(!this.userinfo.open_id || this.userinfo.open_id == ''){
				let that = this
				uni.showModal({
					title:'提示',
					content:'请您绑定微信号',
					cancelColor:'#999',
					confirmColor: this.newColor.color,
					confirmText:'去绑定',
					success: (res) => {
						if(res.confirm){
							that.$Router.push({path:'/pagesA/pages/user/bindWx'})
						}
					}
				})
				return
			}
			// if(!this.userinfo.mobile || this.userinfo.mobile == ''){
			// 	let that = this
			// 	uni.showModal({
			// 		title:'提示',
			// 		content:'请您绑定手机号',
			// 		cancelColor:'#999',
			// 		confirmColor: this.newColor.color,
			// 		confirmText:'去绑定',
			// 		success: (res) => {
			// 			if(res.confirm){
			// 				that.$Router.push({path:'/pagesA/pages/user/bindTel'})
			// 			}
			// 		}
			// 	})
			// 	return
			// }
			let goodLists = JSON.stringify(this.goodList)
			if(!this.location.shop_name || this.location.shop_name == ''){
				let that = this
				uni.showModal({
					title:'提示',
					content:'请选择提货点',
					cancelColor:'#999',
					confirmColor: this.newColor.color,
					confirmText:'去选择',
					success: (res) => {
						if(res.confirm){
							that.$Router.push({path:'/pages/home/setlocation'})
						}
					}
				})
				return
			}else if(!this.master.user_name || this.master.user_name == ''){
				let that = this
				uni.showModal({
					title:'提示',
					content:'请选择服务点',
					cancelColor:'#999',
					confirmColor: this.newColor.color,
					confirmText:'去选择',
					success: (res) => {
						if(res.confirm){
							that.$Router.push({path:'/pages/home/setMaster'})
						}
					}
				})
				return
			}
			uni.showLoading({
				title:'提交中'
			})
			setTimeout(()=>{
				this.request('order/submitOrder',{
					group: this.group,
					goods: goodLists,
					coupon_id: this.couponId,
					cart: this.iscart,
					team_id: this.teamid,
					remark: this.remark,
					address_id:this.addressList.length?this.addressList[0].id:''
				},'post').then(res=>{
					console.log(res,777)
					uni.hideLoading()
					if(res.code == 400){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					if(res.code == 200){
						uni.showLoading({
							title:'去支付...'
						})
						this.onPay(res.data.order_id)
					}
				})
			},300)
		},
		onPay(orderid){ //去支付
			this.request('order/pay',{
				order_id: orderid
			}).then(res=>{
				console.log(res)
				let data = res.data.data
				// #ifdef MP-WEIXIN
				uni.hideLoading()
				wxpay(data,orderid)
				// #endif
			})
		},
		onchange(e){
			if(e.show == true){
				this.shows = false
			}else{
				this.shows = true
			}
		},
		openpop() {
			//选择优惠券
			this.$refs.popup.open();
		},
		getTips(e){
			console.log(e)
			this.remark = e.detail.value
		},
		onbottom(){//加载更多优惠券
			this.pageIndex++
			this.request('user/getMyCouponList',{
				invalid: 1,
				page: this.pageIndex,
				psize: 10
			}).then(res=>{
				console.log(res)
				let newdata = res.data
				this.couponData = this.couponData.concat(newdata)
			})
		},
		close(){
			this.$refs.popup.close();
			this.couponData.forEach(e=>{
				if(e.id == this.couponId){
					this.title ='满'+Math.abs(e.cill)+'减'+Math.abs(e.money)
				}
			})
			if(this.couponId !== ''){
				for(var i = 0; i<this.couponData.length; i++){
					let data = this.couponData[i]
					if(data.id == this.couponId){
						this.prices = this.sumPrice - data.money
					}
				}
			}else{
				this.prices = this.sumPrice
			}
		},
		radioChange(e){
			console.log(e)
			if(e.detail.value !== ''){
				this.couponId = e.detail.value
			}else{
				this.couponId = ''
				this.title =''
			}
		},
		getMycoupon(){//获取我的优惠券
			this.request('user/getMyCouponList',{
				invalid: 1,
				page: this.pageIndex,
				psize: 10
			}).then(res=>{
				console.log(res)
				this.couponData = res.data
			})
		},
		getUserInfo(){
			this.request('user/getUserInfo', {}).then(res => {
				// this.locationId = res.data.goods_point_id;
				console.log(res,8);
				this.userinfo = res.data
				this.getdefault(res.data.goods_point_id)
				this.getMasters(res.data.leader_id)
			});
		},
		getdefault(id){//获取用户默认的提货点
			this.request('user/getGoodsPointLeaderInfo', {
				type: 1,
				type_id: id
			}).then(res => {
				console.log(res)
				this.location = res.data
			});
		},
		getMasters(id){
			this.request('user/getGoodsPointLeaderInfo', {
				type: 2,
				type_id: id
			}).then(res => {
				console.log(res)
				this.master = res.data
			});
		},
		jumpLocation(){
			
			// this.$Router.push({path:'/pages/home/setlocation'})
		}
	}
};
</script>

<style lang="scss" scoped>
.order{
	padding-bottom: 140upx;
}
.dianpu_list {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 21px 0px rgba(255, 74, 44, 0.1);
	border-radius: 15upx;
	box-sizing: border-box;
	padding: 20upx 10upx;
	margin: 0 20upx;
	position: relative;
	display:inline-block;
	margin-top: 40upx;
	width: 95vw;
	// margin: 0 auto;
	> image {
		width: 80upx;
		height: 80upx;
		float: left;
		border-radius: 50%;
		margin-top: 20upx;
	}
	.right_box {
		float: right;
		text-align: left;
		margin-left: 20upx;
		overflow: hidden;
		width: 85%;
		// margin-top: 20upx;
		image {
			width: 30upx;
			height: 26upx;
			float: left;
			margin-top: 5upx;
		}
		.p1 {
			// width: 100%;
			text-align: left;
			margin-bottom: 10upx;
			.text0 {
				font-size: 28upx;
				color: #333333;
				display: block;
			}
			.text2 {
				float: right;
				font-size: 24upx;
				color: #999999;
			}
		}
		.p2 {
			text-align: left;
			font-size: 24upx;
			color: #999999;
		}
		.p3 {
			overflow: hidden;
		}
		.text1 {
			font-size: 24upx;
			width: 80%;
			float: left;
			margin-left: 10upx;
			color: #999999;
		}
	}
	.p4 {
		padding-top: 30upx;
		width: 90%;
		overflow: hidden;
		line-height: 50upx;
		.text1 {
			float: left;
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		image {
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			float: left;
			margin-left: 20upx;
			margin-right: 10upx;
		}
		.text2 {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			float: left;
		}
	}
	.moren {
		position: absolute;
		width: 140upx;
		height: 36upx;
		background: rgba(242, 58, 58, 1);
		border-radius: 6upx;
		color: #ffffff;
		font-size: 22upx;
		top: -15upx;
		text-align: center;
		line-height: 36upx;
	}
	.xuanze {
		width: 100upx;
		height: 46upx;
		line-height: 46upx;
		background: rgba(242, 58, 58, 1);
		border-radius: 23upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		font-size: 22upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}
}
.list_s {
	box-sizing: border-box;
	background-color: #ffffff;
	overflow: hidden;
	height: 256rpx;
	margin: 0 20upx;
	margin-top: 20upx;
	margin-bottom: 20upx;
	box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
	padding: 28upx;
	border-radius: 10upx;
	image {
		width: 200upx;
		height: 200upx;
		float: left;
		border-radius: 15upx;
		margin-right: 20upx;
	}
	.goods_right {
		position: relative;
		overflow: hidden;
	}
	.p1 {
		font-size: 32upx;
		color: #000000;
		overflow: hidden;
		min-height: 80upx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.p2 {
		font-size: 24upx;
		line-height: 26upx;
		margin-top: 10upx;
		color: #333333;
		margin-bottom: 10upx;
		overflow: hidden;
		.text1 {
			color: #646464;
		}
		.text2 {
			color: #f23a3a;
		}
	}
	.p3 {
		margin-top: 20upx;
		overflow: hidden;
		.text1 {
			font-size: 36upx;
			color: #f23a3a;
			margin-right: 20upx;
		}
		.text2 {
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(100, 100, 100, 1);
		}
	}
	.goumai {
		font-size: 24upx;
		width: 150upx;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		background: rgba(242, 58, 58, 1);
		border-radius: 28upx;
		color: #ffffff;
		position: absolute;
		right: 0upx;
		bottom: 0upx;
	}
}
.youhui {
	height: 40upx;
	line-height: 40upx;
	padding: 20upx;
	box-sizing: content-box;
	border-bottom: 1upx solid #f2f2f2;
	.text1 {
		font-size: 24upx;
		color: #333333;
	}
	.text2 {
		float: right;
		color: #999999;
		font-size: 24upx;
		margin-right: 10upx;
		margin-top: 2upx;
		transition: all 0.5s;
		&:active {
			transform: scale(0.9);
		}
	}
	image {
		float: right;
		width: 12upx;
		height: 22upx;
		margin-top: 12upx;
	}
}
.bottom_price {
	height: 98upx;
	line-height: 98upx;
	background: rgba(255, 255, 255, 1);
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	.allprice {
		font-size: 28upx;
		color: #333333;
		margin-left: 32upx;
		text {
			font-size: 32upx;
			color: #f23a3a;
			margin-left: 20upx;
		}
	}
	.submit {
		float: right;
		width: 290upx;
		height: 76upx;
		line-height: 76upx;
		background: rgba(242, 58, 58, 1);
		border-radius: 38upx;
		font-size: 32upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin-right: 32upx;
		margin-top: 10upx;
	}
}
.rules {
	width: 100%;
	height: 60vh;
	background-color: #fff;
	border-top-left-radius: 30upx;
	border-top-right-radius: 30upx;
	box-sizing: border-box;
	padding: 40upx 30upx;
	padding-right: 0;
	padding-bottom: 10upx;
	label{
		// height:110upx;
		overflow: hidden;
		display: block;
		border-bottom: 1upx solid #F2F2F2;
		margin-bottom: 20upx;
		box-sizing: content-box;
		.youhui_list{
			float: left;
			width: 80%;
			.p1{
				font-size:28upx;
				font-family:Droid Sans Fallback;
				font-weight:400;
				color:rgba(51,51,51,1);
			}
			.p2{
				font-size:24upx;
				font-family:Droid Sans Fallback;
				font-weight:400;
				color:rgba(136,136,136,1);
				margin-top: 20upx;
				padding-bottom: 20upx;
			}
		}
		.radio{
			float: right;
			width: 20%;
			>radio{
				margin-left: 65upx;
				margin-top: 20upx;
			}
		}
	}
}
.enter{
	width:290upx;
	height:76upx;
	display: block;
	text-align: center;
	line-height: 76upx;
	background:rgba(255,0,0,1);
	border-radius:38upx;
	font-size:32upx;
	font-family:Droid Sans Fallback;
	font-weight:400;
	color:rgba(255,255,255,1);
	margin: 0 auto;
	margin-top: 10upx;
	margin-bottom: 10upx;
}
.tips {
	height: auto;
	overflow: hidden;
	padding: 20upx;
	// width: 100%;
	display: flex;
	border-bottom: 1rpx solid #f2f2f2;
	box-sizing: content-box;
	text {
		float: left;
		color: #333333;
		font-size: 24upx;
		width: 16vw;
	}
	/* #ifdef MP-WEIXIN */
	textarea {
		float: left;
		font-size: 24upx;
		// margin-top: 25upx;
		margin-top: 7upx;
		margin-left: 10upx;
		padding-bottom: 10upx;
		box-sizing: content-box;
	}
	/* #endif */

	/* #ifdef H5 */
	textarea {
		float: left;
		font-size: 24upx;
		margin-top: 2upx;
		margin-left: 10upx;
		padding-bottom: 10upx;
		box-sizing: content-box;
	}
	/* #endif */
}


	.list{
			padding: 30rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
		}
		.icon>image{
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
		}
</style>
